import React from 'react'
import ReactDOM from 'react-dom'
import Guide from 'components/guide'
import configureStore from "stores";
import { setGuide } from 'actions/main'

/**
 * 开始引导
 * @param options 引导组内容
 * @param key 引导组key
 */
function startGuide(options, config){
  //如果是已经引导过的则不需要再次引导
  let finishedGuide = localStorage.getItem('hly.guide');
  if(finishedGuide && JSON.parse(finishedGuide)){
    finishedGuide = JSON.parse(finishedGuide);
    if(finishedGuide.indexOf(config.key) > -1)
      return;
  }

  if(options.length > 0){
    let nowGuide = options[0];
    let dom = ReactDOM.findDOMNode(nowGuide.ref);
    let pos = dom.getBoundingClientRect();
    //对应需要引导元素上方的白色蒙版
    let gridStyle = {
      position: 'absolute',
      top: pos.top + window.pageYOffset,
      left: pos.left + window.pageXOffset,
      height: pos.height,
      width: pos.width,
      backgroundColor: 'white',
      boxShadow: '0 2px 8px rgba(0,0,0,.4)',
    };
    //两个最外层的蒙版显示
    if(config.type === "INCLUDE_MENU"){
      document.getElementById('menu-guide').style.display = 'block';
      document.getElementById('menu-guide-helper').style.display = 'block';
    }else{
      document.getElementById('content-guide').style.display = 'block';
      document.getElementById('content-guide-helper').style.display = 'block';
    }
    //渲染组件上方的蒙版
    ReactDOM.render(
      (
        <div style={{
          position: 'absolute',
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
          opacity: 0,
          boxShadow: "0 0 0 2px rgba(24,144,255,0.2)",
          zIndex: 2000
        }} id="guide-grid-container">
          <div style={gridStyle} id="guide-grid">
          </div>
        </div>
      ),
      config.type === "INCLUDE_MENU" ? document.getElementById('menu-guide') : document.getElementById('content-guide')
    );
    //渲染引导内容
    ReactDOM.render(
      (
        <Guide actions={options} guideKey={config.key} guidType={config.type}/>
      ),
      config.type === "INCLUDE_MENU" ? document.getElementById('menu-guide-helper') : document.getElementById('content-guide-helper')
    )
  }
}

/**
 * 将一个页面ref对应的元素组装成一个引导组件
 * 一般放在componentDidMount里
 * options 引导内容列表 [{
 * ref dom的ref,
 * title 引导的标题,
 * content 引导的内容
 * placement 引导位置
 * inline 横向相对位置，placement为top或bottom时有效
 * block 纵向相对位置，placement为left或right时有效
 * arrowStyle 箭头样式，可自定义箭头相对边框的位置等
 * dynamic 元素是否是动态的，若是 走逻辑判断显示位置，否则自定义
 * }]
 * config 一个引导组的属性 { total 引导的个数, key 引导组的key , type 蒙版类型，当值为INCLUDE_MENU时覆盖菜单栏}
 */
function wrapGuide(options, config) {
  //如果有total，代表是一个页面内有多个组件需要引导，等所有组件入store后统一开始
  if(config.total){
    let storeGuide = configureStore.store.getState().main.guide || [];
    storeGuide = storeGuide.concat(options);
    if(storeGuide.length === config.total){
      //满足条件，清空store
      configureStore.store.dispatch(setGuide([]));
      startGuide(storeGuide, config);
    } else {
      //等待下个引导项进入
      configureStore.store.dispatch(setGuide(storeGuide));
    }
  } else {
    startGuide(options, config);
  }
}

export default wrapGuide
